<template>
    <div class="about">
        <el-table
            :data="list"
            style="width: 100%"
            row-class-name="tableRowClassName"
        >
            <el-table-column
                prop="id"
                label="视频编号"
                width="80"
            ></el-table-column>
            <el-table-column prop="Clicks" label="点击量" width="80">
            </el-table-column>
            <el-table-column prop="date" label="上传时间" width="160">
            </el-table-column>
            <el-table-column prop="title" label="标题" width="240">
            </el-table-column>
            <el-table-column prop="v_text" label="简介"> </el-table-column>

            <el-table-column prop="header" label="视频封面" width="80">
                <template slot-scope="scope">
                    <img
                        :src="url + scope.row.header"
                        alt=""
                        style="width: 70px; heigth: 60px"
                    />
                </template>
            </el-table-column>

            <el-table-column prop="v_status" label="视频时效状态" width="120">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.v_status == 1" type="danger"
                        >有效</el-tag
                    >
                    <el-tag v-if="scope.row.v_status == 0" type="info"
                        >无效</el-tag
                    >
                </template>
            </el-table-column>

            <el-table-column label="操作"
                >title
                <template slot-scope="scope">
                    <!-- 编辑按钮 -->
                    <el-button
                        type="info"
                        size="mini"
                        icon="el-icon-edit"
                        @click="showEditDialog(scope.row)"
                        >编辑</el-button
                    >
                    <!-- 删除按钮 -->
                    <el-button
                        size="mini"
                        type="danger"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.$index, scope.row)"
                    >
                        删除</el-button
                    >

                    <!-- 修改用户的对话框 -->
                    <el-dialog
                        title="修改视频"
                        :visible.sync="editDialogVisible"
                        width="34%"
                        @close="editDialogClosed"
                    >
                        <!-- 对话框主体部分 -->
                        <el-form
                            :model="editForm"
                            :rules="editFormRules"
                            ref="editFormRef"
                            label-width="70px"
                        >
                            <!-- 点击率 -->
                            <el-form-item label="点击量" prop="Clicks">
                                <el-input v-model="editForm.Clicks"></el-input>
                            </el-form-item>
                            <!-- 视频标题 -->
                            <el-form-item label="标题" prop="title">
                                <el-input v-model="editForm.title"></el-input>
                            </el-form-item>
                            <!-- 用户简介 -->
                            <el-form-item label="简介" prop="v_text">
                                <el-input v-model="editForm.v_text"></el-input>
                            </el-form-item>
                            <!-- 时间 -->
                            <el-form-item label="上传时间" prop="date">
                                <el-input
                                    :disabled="true"
                                    v-model="editForm.date"
                                ></el-input>
                            </el-form-item>

                            <!-- 视频编号 -->
                            <el-form-item label="状态" prop="v_status">
                                <el-input
                                    v-model="editForm.v_status"
                                ></el-input>
                            </el-form-item>
                        </el-form>

                        <!-- 对话框footer底部框架 -->
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="editDialogVisible = false"
                                >取 消</el-button
                            >
                            <el-button type="primary" @click="editUserInfo"
                                >确 定</el-button
                            >
                        </span>
                    </el-dialog>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页功能 -->
        <div class="block" >
            <span class="demonstration"></span>
            <el-pagination
                layout="prev, pager, next"
                :total="150"
                @prev-click="downpage"
                @next-click="pluspage"
                @current-change="topage($event)"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [],
            pager: {
                _page: 8,
                _limit: 7,
            },
            url: process.env.VUE_APP_API_URL,
            //控制修改用户信息对话框是否显示
            editDialogVisible: false,
            //查询到的用户信息对象
            editForm: {},
            //修改表单的规则对象
            editFormRules: {},
        };
    },
    created() {
        this.query();
    },
    methods: {
        // 数据刷新
        query() {
            this.$api.__api_list_video_get(this.pager).then((data) => {
                this.list = data;
            });
        },

        // 监听删除的事件
        handleDelete(index, row) {
            console.log(row);
            this.$api.__api_list_video_delete(row).then(() => {
                this.query();
            });
        },
        //分页
        topage(i) {
            //console.log("跳转");
            this.pager._page = i;
            this.query();
        },
        pluspage() {
            //console.log("下一页");
            this.pager._page++;
            this.query();
        },
        downpage() {
            //console.log("上一页");
            this.pager._page--;
            this.query();
        },
        //展示编辑用户的对话框
        async showEditDialog(row) {
            //console.log(id);
            this.editForm = row;
            this.editDialogVisible = true;
        },
        //监听修改用户对话框的关闭事件
        editDialogClosed() {
            this.$refs.editFormRef.resetFields();
        },
        // 修改视频信息并且提交
        editUserInfo() {
            this.$refs.editFormRef.validate(async (valid) => {
                //console.log(valid);
                if (!valid) return;

                let a = {};
                //console.log(this.editForm.id);
                this.$api
                    .__api_list_video_get({ id: this.editForm.id })
                    .then((res) => {
                        a = res[0];
                        a.title = this.editForm.title;
                        a.v_text = this.editForm.v_text;
                        a.v_status = this.editForm.v_status;
                        a.Clicks = this.editForm.Clicks;
                        this.$api.__api_list_video_put(a, a).then((res) => {
                            // console.log(res);
                            //提示修改成功
                            this.$message.success("更新用户信息成功");
                            //刷新数据列表
                            this.query();
                            //关闭对话框
                            this.editDialogVisible = false;
                        });
                    });
            });
        },
    },
};
</script>
<style lang=""  scoped>

</style>
